<template>
	<div class="v-aside" :style="[style]">
		<v-aside></v-aside>
		<navigator-list></navigator-list>
	</div>
</template>

<script setup>
import { computed } from "vue"
import { useSettingStore } from "/store/setting"
import { ASIDE_WIDTH, LEFT_WIDTH, HEADER_HEIGHT } from "/store/setting/constants"
import VAside from "./components/aside.vue"
import NavigatorList from "./components/navigator-list.vue"

const settingStore = useSettingStore()
const style = computed(() => {
	const data = {
		width: ASIDE_WIDTH + LEFT_WIDTH,
		left: 0,
		top: settingStore.headerHeight + HEADER_HEIGHT,
	}
	if (settingStore.fullPage || settingStore.navigatorType === "Narrow Top") {
		data.left = -1 * data.width
	} else if (settingStore.navigatorType === "Top Left" || settingStore.navigatorType === "Single Left") {
		data.left = LEFT_WIDTH * -1
	}

	return {
		width: data.width + "px",
		left: data.left + "px",
		top: data.top + "px",
	}
})
</script>

<script>
export default {
	name: "v-aside",
}
</script>

<style lang="scss" scoped>
.v-aside {
	position: fixed;
	bottom: 0;
	z-index: 10;
	box-shadow: 10px 0 10px -10px var(--el-border-color-lighter);
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	transition: var(--transition);
}
</style>
